import React, { useRef, useState } from "react";
import axios from "axios";
import { Link, useNavigate } from "react-router-dom";
import "../../theCSS/anniu.css";
import "./login.css";

import verifyImg from "./img/verify.png";
import wechatImg from "./img/wechat.png";
import qqImg from "./img/qq.png";
import InterIP from "../../IP/IP";

export default function LoginID() {
  let IP = InterIP().props.children;
  const phoneRef = useRef();
  const passRef = useRef();
  const verifyRef = useRef();

  const phoneHintRef = useRef();
  const passHintRef = useRef();
  const verifyHintRef = useRef();

  const [phoneHintState, setPhoneHintState] = useState("1234");
  const [passHintState, setPassHintState] = useState("1234");
  const [verifyHintState, setVerifyHintState] = useState("1234");

  const navigate = useNavigate();

  // 回车登录
  function onKeyDownchange(e) {
    if (e.keyCode === 13) {
      navigate("/home");
    }
  }

  function loginById() {
    var user = phoneRef.current.value;
    var pass = passRef.current.value;
    var verify = verifyRef.current.value;

    var phoneHint = phoneHintRef.current;
    var passHint = passHintRef.current;
    var verifyHint = verifyHintRef.current;

    // 判断用户名是否为空
    if (!user) {
      phoneHint.style.color = "red";
      setPhoneHintState((phoneHintState) => {
        return (phoneHintState = "手机号码为空，请重新输入");
      });
      return;
    } else {
      phoneHint.style.color = "transparent";
    }

    // 判断用户名(手机号)输入是否正确
    var reg_tel = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
    if (!reg_tel.test(user)) {
      phoneHint.style.color = "red";
      setPhoneHintState((phoneHintState) => {
        return (phoneHintState = "手机号码格式错误，请重新输入");
      });
      return;
    } else {
      phoneHint.style.color = "transparent";
    }

    // 判断密码是否为空
    if (!pass) {
      passHint.style.color = "red";
      setPassHintState((passHintState) => {
        return (passHintState = "密码为空，请重新输入");
      });
      return;
    } else {
      passHint.style.color = "transparent";
    }

    // 判断验证码是否正确
    if (verify !== "1111") {
      verifyHint.style.color = "red";
      setVerifyHintState((verifyHintState) => {
        return (verifyHintState = "验证码输入错误，验证码为1111");
      });
      return;
    } else {
      verifyHint.style.color = "transparent";
    }

    axios
      .post("http://" + IP + ":3000/login/l", {
        user,
        pass,
      })
      .then((res) => {
        if (!res.data.data.length) {
          alert("账号或密码错误，请重新输入！！！");
        } else {
          addCookie("user", res.data.data[0].user_id, 2 * 24 * 3600);
          function addCookie(key, value, deadline) {
            if (!(key && value && deadline)) return;
            document.cookie = key + "=" + value + ";max-age=" + deadline;
          }
          navigate("/home");
        }
      });
  }

  function registerUser() {
    navigate("/register");
  }

  return (
    <div className="login_main tyc_login_main" onKeyUp={onKeyDownchange}>
      <h3 className="login_biaoti tyc_title">
        <em>登录</em> <Link to="/loginPhone">手机验证码登录</Link>
      </h3>
      <input
        type="text"
        placeholder="请输入手机号"
        className="login_shuru tyc_login_shuru"
        ref={phoneRef}
      />
      <div className="hint" ref={phoneHintRef}>
        {phoneHintState}
      </div>

      <input
        type="password"
        placeholder="密码"
        className="login_shuru"
        ref={passRef}
      />
      <div className="hint" ref={passHintRef}>
        {passHintState}
      </div>

      <input
        type="text"
        placeholder="验证码"
        className="login_shuru verify"
        ref={verifyRef}
      />
      <img src={verifyImg} alt="" className="verifyImg" />
      <a href="###" className="changeverifyImg">
        看不清换一张
      </a>
      <div className="hint" ref={verifyHintRef}>
        {verifyHintState}
      </div>

      <div className="autoLogin">
        <input type="checkbox" />
        <span>自动登录</span>
        <Link to="/ForgetPass">忘记密码</Link>
      </div>
      <div className="btns">
        <input
          type="button"
          value="登录"
          className="login_lvse"
          onClick={loginById}
        />
        <input
          type="button"
          value="会员注册"
          className="login_chengse"
          onClick={registerUser}
        />
      </div>

      <p>提示：未注册用户将直接注册成为礼拜五用户</p>
      <h4>-------------- 用合作网站登录 --------------</h4>
      <div className="qqwechat">
        <img src={wechatImg} alt="" />
        <img src={qqImg} alt="" />
      </div>
    </div>
  );
}
